import { useDatasource } from '@/views/data-manage/common/use-datasource'
import { NDataTable, NSelect, NSpace } from 'naive-ui'
import { defineComponent } from 'vue'
import { useColumns } from './use-columns'
import { useTable } from './use-table'

const DbTableInfo = defineComponent({
  name: 'DbTableInfo',
  setup() {
    //数据源类型下拉选项
    const {
      dsVariables,
      getDsTypeOptions,
      getDatasourceByType,
      getDbsByDatasourceId,
      getTablesByDsAndDb
    } = useDatasource()
    getDsTypeOptions()

    const { state, getTableDetail } = useTable()
    const { columnsRef } = useColumns()
    return {
      dsVariables,
      getDatasourceByType,
      getDbsByDatasourceId,
      getTablesByDsAndDb,
      state,
      getTableDetail,
      columnsRef
    }
  },
  methods: {
    handleDsTypeChange(value: string) {
      this.state.datasourceId = null
      this.dsVariables.dsOptions = []
      this.state.dbName = null
      this.dsVariables.dbOptions = []
      this.state.tableName = null
      this.dsVariables.tableOptions = []
      this.state.tableDetail = {}
      this.getDatasourceByType(value)
    },
    handleDsChange(datasourceId: number) {
      this.state.dbName = null
      this.dsVariables.dbOptions = []
      this.state.tableName = null
      this.dsVariables.tableOptions = []
      this.state.tableDetail = {}
      this.getDbsByDatasourceId(datasourceId)
    },
    handleDbChange(dbName: string) {
      this.state.tableName = null
      this.dsVariables.tableOptions = []
      this.state.tableDetail = {}
      this.getTablesByDsAndDb(this.state.datasourceId, dbName)
    },
    handleTableChange(tableName: string) {
      this.state.tableName = tableName
      this.getTableDetail()
    }
  },
  render() {
    return (
      <NSpace vertical>
        <NSpace style='margin:20px 10px'>
          <NSelect
            v-model={[this.state.datasourceType, 'value']}
            options={this.dsVariables.dsTypeOptions}
            size='small'
            style='width:300px'
            placeholder={window.$t('dataManage.datasourceTypeTips')}
            onUpdateValue={this.handleDsTypeChange}
          />
          <NSelect
            v-model={[this.state.datasourceId, 'value']}
            options={this.dsVariables.dsOptions}
            filterable
            size='small'
            style='width:300px'
            placeholder={window.$t('dataManage.selectDatasourceTips')}
            onUpdateValue={this.handleDsChange}
          />
          <NSelect
            v-model={[this.state.dbName, 'value']}
            options={this.dsVariables.dbOptions}
            filterable
            size='small'
            style='width:300px'
            placeholder={window.$t('dataManage.selectDbTips')}
            onUpdateValue={this.handleDbChange}
          />
          <NSelect
            v-model={[this.state.tableName, 'value']}
            options={this.dsVariables.tableOptions}
            filterable
            size='small'
            style='width:300px'
            placeholder={window.$t('dataManage.selectTableTips')}
            onUpdateValue={this.handleTableChange}
          />
        </NSpace>

        <div>
          <h3 style='margin-left:20px'>{window.$t('dataManage.table')}</h3>
          <NDataTable
            row-class-name='items'
            columns={this.columnsRef.columns}
            size='small'
            single-line={false}
            data={this.state.tableDetail?.columns}
            loading={this.state.loading}
            scrollX={this.columnsRef.tableWidth}
          />
        </div>
      </NSpace>
    )
  }
})

export default DbTableInfo
